<template>
  <div class="pass-table-alone">
    <el-table :data="newTableData" style="width: 100%" size="mini">
      <el-table-column
        :width="item.name === 'CALL_NO_SHOW' || item.name === 'CALLED_NO_SHOW' || item.name === 'OFFERING_TIME' || item.name === 'GRADE_TIME' ? '160' : '120'"
        v-for="(item, index) in headerOptions"
        :key="'passTable' + index"
        v-if="item.show === true"
        :prop="item.name"
        :label="item.displayname">
      </el-table-column>
      <template v-for="(item, index) in tableHeader">
        <el-table-column
          :key="item.prop + index"
          :prop="item.prop"
          :label="item.label"
          v-if="item.label!== '操作' && item.prop !== 'COMMENTS'&&item.prop !== 'LABELS_SHOW'">
        </el-table-column>
        <el-table-column v-if="item.prop === 'COMMENTS'" :label="$t('qualityCheck.commentCont')" width="120">
          <template scope="scope">
            <!--<questionToolTip v-if="tableData[scope.$index].COMMENTS" :tipContent="tableData[scope.$index].COMMENTS"></questionToolTip>-->
            <span class="qc-label-show" style="display: inline-block;width:120px;text-overflow: ellipsis;overflow: hidden;" :title="scope.row.COMMENTS">{{scope.row.COMMENTS}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="item.prop === 'LABELS_SHOW'" :label="$t('public.callLabel')" width="">
          <template scope="scope">
            <span class="qc-label-show" style="display: inline-block;width:120px;text-overflow: ellipsis;overflow: hidden;" :title="scope.row.LABELS_SHOW">{{scope.row.LABELS_SHOW}}</span>
          </template>
        </el-table-column>
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          width="180"
          fixed="right"
          v-if="item.label=== '操作' && item.prop !== 'COMMENTS'">
          <template scope="scope" >
            <el-button type="text" @click="lookGrade(scope.row)" size="small" v-if="scope.row.GRADE_USER !== $store.state.session.user._id">{{$t('qualityCheck.lookGrade')}}</el-button>
            <el-button type="text" @click="againGrade(scope.row)" size="small" v-if="scope.row.GRADE_USER === $store.state.session.user._id">{{$t('qualityCheck.againGrade')}}</el-button>
            <el-button style="margin-left: 8px;" @click="handle(scope.row)" type="text" size="small">{{$t('qualityCheck.ListenToTheRecording')}}</el-button>
            <el-button style="margin-left: 8px;" type="text" size="small" icon="el-icon-more" class="operate">
              <div class="button-group">
                <span style="margin-left: 8px;" @click="down"><a :href="scope.row.recordFileUrl" target="_blank" download>{{$t('call.downloadAudio')}}</a></span>
                <br>
                <span @click="look(scope.row.COMMENTS)">{{$t('qualityCheck.viewLog')}}</span><br>
                <span style="margin-left: 8px;" @click="looklog(scope.row._id)">{{$t('qualityCheck.listenHistory')}}</span><br>
              </div>
            </el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  import {getCache} from '@/utils/m7Utils.js'
  import questionToolTip from '../../../ui-modules/questionToolTip/QuestionToolTip.vue'
  export default {
    name: 'PassTable',
    data () {
      return {
        tableHeaderBefore: [
//          {prop: 'CALL_NO_SHOW', label: this.$t('qualityCheck.callingNumber')},
//          {prop: 'CALLED_NO_SHOW', label: this.$t('qualityCheck.calledNumber')},
//          {prop: 'DISPOSAL_AGENT', label: this.$t('call.callRingSeat')},
//          {prop: 'CONNECT_TYPE_show', label: this.$t('call.callType')},
//          {prop: 'ERROR_MEMO', label: this.$t('call.skillGroup')},
//          {prop: 'INVESTIGATE', label: this.$t('public.satisfaction')},
//          {prop: 'OFFERING_TIME', label: this.$t('public.callTime')},
//          {prop: 'GRADE_TIME', label: this.$t('qualityCheck.qualityTime')},
//          {prop: 'callTimeDisplay', label: this.$t('call.callTime')},
//          {prop: 'GRADE_USER_SHOW', label: this.$t('qualityCheck.qualityControlPersonnel')},
//          {prop: 'LABELS_SHOW', label: this.$t('public.callLabel')},
//          {prop: 'QC_SUBMIT_SHOW', label: this.$t('qualityCheck.videoSource')},
//          {prop: 'RECORDING_PERFORMANCE_SHOW', label: this.$t('qualityCheck.performanceVideo')},
//          {prop: 'submit_time', label: this.$t('qualityCheck.agentSubmitTime')},
//          {prop: 'SQ_LABEL_SHOW', label: this.$t('call.SQLabel')},
          {prop: 'monitorTypeName', label: this.$t('qualityCheck.monnityType')}
        ],
        tableHeaderAfter: [
          {prop: 'COMMENTS', label: this.$t('qualityCheck.commentCont')},
          {prop: 'amount_show', label: this.$t('qualityCheck.overAll')},
          {prop: '', label: this.$t('public.operate')}
        ],
        newTableData: []
      }
    },
    props: ['configList', 'tableData', 'template', 'floors', 'headerOptions'],
    components: {
      questionToolTip
    },
    methods: {
      handle (value) {
        let path = ''
        let self = this
        this.recordFileName(value.FILE_SERVER, value.RECORD_FILE_NAME, function (url) {
          path = url
          self.$emit('handle', {_id: value._id, path: path})
        })
      },
      down () {
        this.$emit('down')
      },
      look (value) {
        this.$emit('look', value)
      },
      looklog (value) {
        this.$emit('looklog', value)
      },
      lookGrade (value) {
        this.$emit('againGrade', value, 'look')
      },
      againGrade (value) {
        this.$emit('againGrade', value)
      },
      recordFileName (server, name, callBack) {
        if (!server) {
          callBack('')
          return
        }
        let fileList = name.split('/')
        let userPbx = fileList[1]
        if (server.indexOf('record.7moor.com') > -1 || server.indexOf('m7-record.oss-cn-hangzhou') > -1 || server.indexOf('aliyuncs.com') > -1) {
          server = 'https' + server.substr(server.indexOf(':'), server.length)
          callBack(server + '/' + name)
        } else if (document.location.protocol === 'https:') {
          if (userPbx) {
            getCache('accountPbx', userPbx, this, function (pbxObj) {
              if (pbxObj) {
                if (pbxObj.assDomain) {
                  let assDomain = pbxObj.assDomain
                  if (assDomain.substr(assDomain.length - 1, assDomain.length) === '/') {
                    assDomain = assDomain.substr(0, assDomain.length - 1)
                  }
                  server = assDomain
                }
              }
              callBack(server + '/' + name)
            })
          } else {
            callBack(server + '/' + name)
          }
        } else {
          callBack(server + '/' + name)
        }
      }
    },
    computed: {
      tableHeader () {
        let arr = []
        let floors = this.floors
        let renderForm = function (config) {
          config.forEach(item => {
            if (item.name.split('-').length <= floors) {
              arr.push({prop: item.name + '_show', label: item.value})
            }
            if (item.child && item.child.length > 0) {
              renderForm(item.child)
            }
          })
        }
        if(this.configList){
          renderForm(this.configList)
        }
        return this.tableHeaderBefore.concat(arr, this.tableHeaderAfter)
      }
    },
    watch: {
      tableData (current) {
        let tableData = current || []
        this.newTableData = []
        if (tableData.length < 1) { // 解决初始取不到prpos值，table渲染报错的问题
          return []
        }
        let self = this
        for (let i = 0; i < tableData.length; i++) {
          this.recordFileName(tableData[i].FILE_SERVER, tableData[i].RECORD_FILE_NAME, function (url) {
            tableData[i].recordFileUrl = url
            self.newTableData.push(tableData[i])
          })
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .contentQua
    overflow hidden
    white-space nowrap
    text-overflow ellipsis
    padding-top 6px
    display inline-block
    width 100%
  .search-pagination
    float right
  .quality_result
    height calc(100vh - 106px)
    padding 0 20px
    overflow scroll
    .el-input
      width inherit
    .tables
      padding-bottom 20px
    .el-dialog
      .find
        margin-bottom 20px
      .conte
        color #c1c1c1
      .el-input
        width inherit
      .el-checkbox
        color $c-his-border
        margin-left 10px
      .search
        display inline-block
        width 108px
        height 30px
        background #72c7e3
        color $cf-white
        text-align center
        line-height 30px
        border-radius 2px
        cursor pointer
        background $c-main
    .temp
      display inline-block
      width 70px
      color #979797
      .cont
        background #f7f7f7
        height 100px
        margin-top 8px
        padding 10px
        font-size 12px
        line-height 24px
        color #b4b4b4
    .deploy
      height 48px
      line-height 48px
      color #989898
      border 1px solid #ebebeb
      border-bottom none
      padding-left 14px
      margin-top 16px
      .el-pagination
        padding 0
    .cell
      .el-button
        margin-left 0px
    .sub
      text-align right
      margin-top 30px
      .rest
      .search
        display inline-block
        width 108px
        height 30px
        background #72c7e3
        color $cf-white
        text-align center
        line-height 30px
        border-radius 2px
        cursor pointer
      .search
        background $c-main
        margin-left 24px
    .export
      margin-top 20px
    .tem
      margin-top 20px
      color $c-his-border
      .el-row
        margin-top 16px
        line-height 36px
        .el-input
          width 100%
        .el-col-2
          width 72px
        .el-col-1
          width 20px
          margin-left 6px
    .el-radio-group
      margin-top 10px
    .el-radio
      margin 0 0 6px 20px
      .el-checkbox
        color $c-his-border
        margin-left 10px
      .temp
        display inline-block
        width 70px
      .templ
        display inline-block
        width 70px
        margin-left 10px
      .mark
        margin-left 28px
        color #979797
      .el-date-editor
        width 360px
      .el-input-group
        width 160px
    .title
      color $cf-level2
      margin 28px 0 18px 0
      font-weight normal
      position relative
      .sign
        position relative
        width 12px
        height 12px
        background #7ccdd1
        display inline-block
        z-index 3
      .text
        position relative
        display inline-block
        padding 0 8px 0 10px
        background $cf-white
        z-index 3
      &:after
        content ""
        display inline-block
        width 100%
        left 0
        border-bottom 1px dashed $cf-level2
        position absolute
        top 12px
  .qc-label-show
    max-width 7em
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
    cursor pointer
  .button-group
    display none
    position: absolute
    top -30px
    right 16px
    z-index 1
    background-color $cf-white
    text-align center
    padding 0 10px
    border 1px solid #eee
    span
      display inline-block
      padding 4px 0
  .operate
    position relative
    &:hover
      .button-group
        display: block
  /*.pass-table-alone tr:last-child td:last-child .operate .button-group*/
    /*top -40px*/
  /*.pass-table-alone tr:nth-last-child(2) td:last-child .operate .button-group*/
    /*top -10px*/
</style>
